<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图+Ajax</title>
    <style>
        .active {
            display: inline-block;
            width: 150px;
            height: 50px;
            background-color: red;
            margin-right: 10px;
            margin-bottom: 10px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.5s;
        }
    </style>
</head>
<body>
    <div id="app">
        <span
                v-for="(item,index) in categoryList"
                :key="index"
                :class="{active:item.id == currentId}"
                @click="activeCurrent(item.id)"
        >
            {{item.name}}
        </span>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el: '#app',
        data(){
            return {
                categoryList: [
                ],
                currentId: 0
            }
        },
        created(){  // 数据初始化
            $.ajax({
                url: 'https://api.luffycity.com/api/v1/course/free/',
                type: 'get',
                success: (res) => {
                    if (res.code === 0) {
                        console.log(res.data)
                        console.log(this)
                        let data = res.data
                        let all = {id: 0, name: '全部'}
                        // this.categoryList.push(all)
                        for (const dataKey in data) {
                            // console.log(typeof dataKey, dataKey)
                            this.categoryList.push({id: data[dataKey].id, name: data[dataKey].name})
                        }
                        this.categoryList.unshift(all)
                    }
                }
            })
        },
        methods: {
            activeCurrent(id){
                this.currentId = id
            }
        }
    })
</script>
</html>